<script setup lang="ts">
import dayjs from "dayjs";
import { reactive, ref, onMounted } from "vue";
import userAvatar from "./userAvatar.vue";
import UserProfile from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import { getCurrentUser } from "@/api/system/user";
/** 用户名 */
const currentUser = ref(null);
const activeTab = ref("UserProfile");
const state = reactive({
  user: {},
  roleName: {},
  postName: {}
});

defineOptions({
  name: "UserProfileSettings"
});
onMounted(async () => {
  const data = await getCurrentUser();
  // 获取用户信息
  currentUser.value = data;
  state.user = currentUser;
});
</script>
<template>
  <div v-if="currentUser" class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <userAvatar :user="currentUser" />
            </div>
            <el-row>
              <el-descriptions :column="1">
                <el-descriptions-item label="用户名称">{{
                  currentUser.username
                }}</el-descriptions-item>
                <el-descriptions-item label="用户昵称">{{
                  currentUser.nickname
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{
                  currentUser.mobile
                }}</el-descriptions-item>
                <el-descriptions-item label="用户邮箱">{{
                  currentUser.email
                }}</el-descriptions-item>
                <el-descriptions-item label="角色名称">
                  {{ currentUser.roleName }}
                </el-descriptions-item>
                <el-descriptions-item label="创建日期">
                  {{
                    dayjs(currentUser.createTime).format("YYYY-MM-DD HH:mm:ss")
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="UserProfile">
              <UserProfile :user="state.user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :user="state.user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped></style>
